import React, { useState,Component } from 'react';
import {connect} from 'dva';
import styles from '../index.less'
import {PLATFORM_NUMBER} from "../../../enum"
import { Select,Row, Col,Input,AutoComplete,Card,Button, Form } from 'antd';
const FormItem = Form.Item;

@connect(({cooperativeStore})=>({
    Refresh:cooperativeStore.refrenshList,
    roleArr:cooperativeStore.RoleByUserId,
}))
class SelectInput extends React.Component{
    state={
        ByUserId:[]
    }
    componentDidMount(){
        this.querySysRoleByUser()
      }
    //( select ) 账号管理-新建账号-添加人员（根据用户id查询用户下所有角色）
      querySysRoleByUser=()=>{
        const { dispatch } = this.props;
        dispatch({
            type: 'cooperativeStore/querySysRoleByUserId',
            payload:{
                data:{
                    "platform": PLATFORM_NUMBER.SUPPLIER_USER,
                  "parentUserId": 0
                  }
            }
        })
    }
    handleSubmit = () => {
        const userInfo = this.props.form.getFieldsValue()
        console.log("userInfo:",userInfo)
        const pam={}
        for(let i in userInfo ){
            if(userInfo[i]){
                pam[i]=userInfo[i]
            }
        }
        const {dispatch}=this.props
        dispatch({
            type: 'cooperativeStore/querySysUser',
            payload:{
                data:{
                    "username":pam.username,
                    "name":pam.name,
                    "mobile":pam.mobile,
                    "email":pam.email,
                    "roleId":this.state.roleId,
                    "status":pam.status,
                    "parentUserId":0,
                    "platform": PLATFORM_NUMBER.SUPPLIER_USER,
                }
            }
        })
        this.state.roleId=''
        this.props.parent.getChildrenMsg(this.state.list)
        // this.props.form.resetFields();
        
    }
    handleRoleId=(e,obj)=>{
        this.state.roleId=obj.key
      }
    render() {
        const { getFieldDecorator } = this.props.form;
        const FormItemLayout  = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 6 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        }
        function handleChange(value) {
            console.log(`selected ${value}`);
        }

        function onChange(value) {
        console.log(`selected ${value}`);
        }

        function onBlur() {
        console.log('blur');
        }

        function onFocus() {
        console.log('focus');
        }

        function onSearch(val) {
        console.log('search:', val);
        }

        const { Option } = Select;
        const {ByUserId}=this.state
        const {roleArr}=this.props
        return (
            <div>
                <Form onSubmit={this.handleSubmit}>
                    <Row>
                        <Col  xl={8} md={12} sm={24}>
                            <FormItem label="账号" {...FormItemLayout}>
                                {
                                    getFieldDecorator('username',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Input style={{ width: 232   }} placeholder="请输入服务名称" />
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={8} md={12} sm={24}>
                            <FormItem label="姓名" {...FormItemLayout}>
                                {
                                    getFieldDecorator('name',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Input style={{ width: 232   }} placeholder="请输入服务名称" />
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={8} md={12} sm={24}>
                            <FormItem label="手机号" {...FormItemLayout}>
                                {
                                    getFieldDecorator('mobile',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Input style={{ width: 232   }} placeholder="请输入服务名称" />
                                    )
                                }
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col  xl={8} md={12} sm={24}>
                            <FormItem label="邮箱" {...FormItemLayout}>
                                {
                                    getFieldDecorator('email',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Input style={{ width: 232   }} placeholder="请输入服务名称" />
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={8} md={12} sm={24}>
                            <FormItem label="状态" {...FormItemLayout}>
                                {
                                    getFieldDecorator('status',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select 
                                        placeholder="状态" 
                                        style={{ width: 232 }} 
                                        onChange={handleChange} 
                                        allowClear={true}
                                        >
                                            <Option value={1}>有效</Option>
                                            <Option value={2}>无效</Option>
                                        </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col  xl={8} md={12} sm={24}>
                            <FormItem label="角色" {...FormItemLayout}>
                                {
                                    getFieldDecorator('transportType',{
                                        initialValue:'',
                                        rules:[]
                                    })(
                                        <Select 
                                        placeholder="选择角色分组" 
                                        style={{ width: 232 }} 
                                        onSelect={this.handleRoleId} 
                                        allowClear={true}
                                        >
                                            {roleArr.map(it =>{
                                                return(
                                                <Select.Option key={it.roleId} value={it.roleId}>
                                                    {it.roleName}
                                                </Select.Option>
                                                )
                                            } )}
                                            </Select>
                                    )
                                }
                            </FormItem>
                        </Col>
                        <Col xl={4} md={12} sm={24} style={{float: "right", marginBottom: 10}}>
                            <Button type="primary" onClick={this.handleSubmit} icon="search">搜索</Button>
                        </Col>
                    </Row>
                </Form>

                
            </div>
        )
    }
}
export default Form.create()(SelectInput);